<script setup lang="ts">

import SpecificationTable from "@/views/medSupCatalog/component/specificationTable.vue";
import PriceTable from "@/views/medSupCatalog/component/priceTable.vue";

defineOptions({
  // 底部tab页面
  name: 'BottomTab'
})

// 组件伪注册
const componentList = {
  // 使用shallowRef包裹，解决浏览警告
  'SpecificationTable': shallowRef(SpecificationTable),
  'PriceTable': shallowRef(PriceTable)
}

// 当前激活tab
const activeName = ref('0');
const panes = ref([
  {
    label: '药品规格',
    value: '0',
    component: componentList.SpecificationTable
  },
  {
    label: '售价记录',
    value: '1',
    component: componentList.PriceTable
  },
  {
    label: '成本价记录',
    value: '2',
    component: componentList.PriceTable
  }
])

// 当前显示组件
const component = computed(() => {
  const index = panes.value.findIndex(item => item.value === activeName.value)
  return panes.value[index].component;
})

</script>

<template>
  <el-tabs type="border-card" class="mt16 height-100" v-model="activeName">
    <el-tab-pane
      v-for="(item, index) in panes"
      :key="index"
      :label="item.label"
    >
    </el-tab-pane>
    <component :is="component"></component>
  </el-tabs>
</template>

<style scoped lang="scss">
:deep(.el-tabs__content ){
  height: 100%;
}
</style>
